import * as THREE from 'three';
import '../../css/base.css'
import {baseUrl as baseUrl2} from '../../js/base.js'

let canvas = document.getElementById("canvas")
let renderer, scene, camera;
let orbitControls;
let moveX = 0, // 把鼠标屏幕上的横向偏移量，作为 旋转角度的基准
  moveY = 0, // 把鼠标在屏幕上的纵向偏移量 组委旋转角度的基准
  target = new THREE.Vector3(), // 相机看向的方向
  v = .2 // 速度
let startX, startY;

function initCSR() {
  camera = new THREE.PerspectiveCamera(74, window.innerWidth / window.innerHeight, 0.1, 1000)

  scene = new THREE.Scene()

  renderer = new THREE.WebGLRenderer({canvas, antialias: true, alpha: true});
  camera.updateProjectionMatrix();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight, false)
}

function initModel() {
  //前后上下左右
  let baseUrl = baseUrl2 + 'static/images/vrLook/'
  let arrImg = [
    loadTexture(baseUrl + 'O1_f.webp'),
    loadTexture(baseUrl + 'O1_b.webp'),
    loadTexture(baseUrl + 'O1_u.webp'),
    loadTexture(baseUrl + 'O1_d.webp'),
    loadTexture(baseUrl + 'O1_l.webp'),
    loadTexture(baseUrl + 'O1_r.webp'),
  ]
  let geometry = new THREE.BoxGeometry(100, 100, 100);
  let material = new THREE.MultiMaterial(arrImg)
  let mesh = new THREE.Mesh(geometry, material)

  scene.add(mesh)
}

function initControls() {
  canvas.addEventListener('touchstart', start, false)
  canvas.addEventListener('touchmove', move, false)
  canvas.addEventListener('mousedown', ev => {
    start(ev)
    canvas.addEventListener('mousemove', move, false)
  }, false)
  canvas.addEventListener('mouseup', () => {
    canvas.removeEventListener('mousemove', move)
  }, false)
  canvas.addEventListener('mouseout', () => {
    canvas.removeEventListener('mousemove', move)
  }, false)
}

function start(e) {
  startX = e.pageX || e.touches[0].pageX
  startY = e.pageY || e.touches[0].pageY
}

function move(e) {
  const pageX = e.pageX || e.touches[0].pageX, pageY = e.pageY || e.touches[0].pageY
  moveX = moveX + (startX - pageX) * v
  moveY = moveY + (pageY - startY) * v
  if (moveY >= 90) {
    moveY = 90
  } else if (moveY <= -90) {
    moveY = -90
  }
  startX = pageX
  startY = pageY
}

function loadTexture(url) {
  let textureLoader = new THREE.TextureLoader();
  let texture = textureLoader.load(url)
  return new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    side: THREE.DoubleSide
  })
}

function render() {
  if (orbitControls) orbitControls.update();
  target.setY(Math.sin(THREE.MathUtils.degToRad(moveY)))
  target.setZ(Math.sin(THREE.MathUtils.degToRad(moveX - 90)) * Math.cos(THREE.MathUtils.degToRad(moveY)))
  target.setX(Math.cos(THREE.MathUtils.degToRad(moveX - 90)) * Math.cos(THREE.MathUtils.degToRad(moveY)))
  camera.lookAt(target)
  renderer.render(scene, camera)
}

function animation() {
  requestAnimationFrame(animation)
  render()
}

(function () {
  initCSR()
  initModel()
  initControls()
  animation()
  window.addEventListener('resize', ev => {
    renderer.setPixelRatio(window.devicePixelRatio);
    camera.aspect = canvas.offsetWidth / canvas.offsetHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight, false)
  })
})()

